<template>
  <div>消息公告</div>
</template>
<template>
  <div>
    <div class="top-panel__box">

      <el-form :model="dataForm" ref="dataForm" inline size="small" onsubmit="return false">
        <el-form-item>
          <el-input placeholder="姓名/手机号" v-model="dataForm.nameOrPhone" maxlength="30" clearable />
        </el-form-item>
        <el-form-item >
          <el-cascader
            placeholder="请选择城市"
            :options="localMap"
            v-model="dataForm.selectedOptions" clearable>
          </el-cascader>

        </el-form-item>
        <el-form-item>
          <organization-cascader :flag="'id'" v-model="dataForm.organizationId"></organization-cascader>
        </el-form-item>
        <el-form-item>
          <el-select placeholder="状态" v-model="dataForm.userStatus" clearable>
            <el-option key="NORMAL" value="NORMAL" label="启用" />
            <el-option key="CLOSE" value="CLOSE" label="禁用" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getList(1)">
            <fa-icon class="fa-search" />查询</el-button>
          <reset-button :dataForm.sync="dataForm" :fixedData="{pageNum: 1, pageSize: 20}" />
        </el-form-item>

      </el-form>
    </div>
    <el-row class="table-top">
      <el-table :border="true" :data="dataList" v-loading="tableLoading"  tooltip-effect="light" class="tc-table" size="small">
        <el-table-column type="selection" width="55" fixed="left"></el-table-column>
        <template v-for="(column, index) in FOLLOW_HEAD_LIST">
          <el-table-column :prop="column.prop" :label="column.label" :key="index" :width="column.width" :show-overflow-tooltip="true" />
        </template>
      </el-table>
      <el-row class="pagination-top">
        <pagination :pageNum.sync="dataForm.pageNum" :curSizes.sync="dataForm.pageSize" :total="total" @getList="getList" />
      </el-row>
    </el-row>
    <el-dialog :title="editData.currentStatus === 'VALID' ? '查看' : '编辑'" :visible.sync="editDialog" width="30%" :close-on-click-modal="false">
      <edit-biz v-if="editDialog"
      @close="closeEditPop"
      :listValue="userValueList"
      @showType="getEditType"
      :initData="editData"
      :isTag="isTag"
      :isUser="isUser"
      :isOrg="isOrg"
      :options="BIZ_FORM"
      :editType="editType"
      @updataSuccess="uppdataSuccess"
      @changeSelect="getSelectValue" />
    </el-dialog>
    <el-dialog title="编辑成员" :visible.sync="editUser" width="60%" :close-on-click-modal="false">
      <choose-user v-if="editUser" :valueList="userValueList" @updataSuccess="getUserData" @close="closeUserChoose" />
    </el-dialog>
    <el-dialog title="编辑标签" :visible.sync="editTag" width="30%" :close-on-click-modal="false">
      <choose-tag v-if="editTag" :valueList="userValueList" @updataSuccess="getTagData" @close="closeTagChoose" />
    </el-dialog>
    <el-dialog title="编辑机构" :visible.sync="editOrg" width="30%" :close-on-click-modal="false">
      <choose-org v-if="editOrg" :valueList="userValueList" @updataSuccess="getOrgData" @close="closeOrgChoose" @updateTemp="getOrgTempList" />
    </el-dialog>
    <el-dialog title="分类管理" :visible.sync="typeDialog" width="30%" :close-on-click-modal="false">
      <type-manage @add="addTypeEvent" v-if="typeDialog" :dictId="'10046'" @updataSuccess="closeTypeChoose" @close="closeTypeChoose" />
    </el-dialog>

    <el-dialog title="新增分类" :visible.sync="addDialog" width="30%" :close-on-click-modal="false">
      <add-type v-if="addDialog" @updataSuccess="updateType"/>
    </el-dialog>
    <el-dialog title="编辑分类" :visible.sync="editTypeDialog" width="30%" :close-on-click-modal="false">
      <add-type v-if="editTypeDialog"/>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import api from './api'
import { CONSTANT_OBJ } from '@/utils/constant'
import { FOLLOW_HEAD_LIST, BIZ_FORM } from './js/contant.js'
import OrganizationCascader from '@/components/organizationCascader'
import { common } from '@/utils/common'
import ChooseUser from './components/ChooseUser'
import EditBiz from './components/EditBiz'
import TypeManage from './components/TypeManage'
import AddType from './components/AddType'
import ChooseTag from './components/ChooseTag'
import ChooseOrg from './components/ChooseOrg'
import {getCookie} from '@/utils/util'
import localMap from '@/views/prodMsg/js/localMap.json'
export default {
  components: { OrganizationCascader, ChooseUser, EditBiz, TypeManage, AddType, ChooseTag, ChooseOrg },
  data () {
    return {
      localMap,
      FOLLOW_HEAD_LIST,
      BIZ_FORM,
      tableLoading: false,
      editUser: false,
      editTag: false,
      editDialog: false,
      editOrg: false,
      isTag: false,
      isUser: false,
      isOrg: false,
      typeDialog: false,
      addDialog: false,
      editTypeDialog: false,
      dataForm: {
        pageNum: 0,
        pageSize: 10,
        tenantId: getCookie('tenantId'),
        realName: '',
        nameOrPhone:'',
        userStatus: '',
        residentCity: '',
        organizationId: '',
        organizationIds:[],
        selectedOptions:[]

      },
      userValueList: [],
      dataList: [],
      editorDialog: false,
      isEdit: false,
      total: 0,
      productNoList: [],
      editData: {},
      uploadDialog: false,
      childDictList: [],
      orgIds: [],
      userIds: [],
      labelIds: [],
      editType: ''
    }
  },
  mounted () {

    this.getList()
    this.getData()
  },
  methods: {
    // 获取详细数据
    getData () {
      api.queryById('10046').then(res => {
        const { responseCode, data } = res
        if (responseCode === CONSTANT_OBJ.RES_SUCCESS) {
          this.childDictList = (data && data.childDictList) || []
        }
      })
    },
    // 查询列表
    getList (val) {
      this.dataForm.pageNum = val || this.dataForm.pageNum
      this.tableLoading = true
      let param= {...this.dataForm}
      if (param.selectedOptions && param.selectedOptions.length) {
        param.residentCity=param.selectedOptions.join('-')
      }
      if (param.organizationId) {
        param.organizationIds=[param.organizationId]
      }
      api.findAllList(param).then(res => {
        const { responseCode, data } = res
        if (responseCode === CONSTANT_OBJ.RES_SUCCESS) {

          this.dataList = data.list || []
          this.total = parseInt(data.total) || 0
        }
      }).finally(() => {
        this.tableLoading = false
      })
    },

    showAdd () {
      this.isEdit = false
      this.editDialog = true
      this.isTag = false
      this.isUser = false
      this.isOrg = false
      this.editType = 'add'
      this.editData = {}
      this.userValueList = []
    },
    showEditor (row, type) {
      this.editType = type
      this.editDialog = true
      this.isEdit = true
      this.editData = {...row}
      switch (row.receiveSett) {
        case 'SELECT_LABEL':
          this.isTag = true
          this.isUser = false
          this.isOrg = false
          if (row.listValue) {
            this.userValueList = row.listValue.map(el => {
              return JSON.parse(el)
            })
          }
          break
        case 'SELECT_USER':
          this.isTag = false
          this.isUser = true
          this.isOrg = false
          if (row.listValue) {
            this.userValueList = row.listValue.map(el => {
              return JSON.parse(el)
            })
          }
          break
        case 'SELECT_ORG':
          this.isTag = false
          this.isUser = false
          this.isOrg = true
          if (row.listValue) {
            this.userValueList = [...row.listValue]
          }
          break
        default:
          this.isTag = false
          this.isUser = false
          this.isOrg = false
          break
      }
    },
    // 公告生效
    validNoticeEvent (row) {
      common.confirmFn(`是否确定将此公告状态置为生效`, '').then(res => {
        if (res) {
          api.validNotice(row.id).then(res => {
            const { responseCode } = res
            if (responseCode === CONSTANT_OBJ.RES_SUCCESS) {
              this.getList(0)
              console.log('删除成功')
            }
          })
        }
      })
    },
    // 公告失效
    deletPersonInfo (row) {
      common.confirmFn(`是否确定将此公告状态置为失效`, '').then(res => {
        if (res) {
          api.invalidNotice(row.id).then(res => {
            const { responseCode } = res
            if (responseCode === CONSTANT_OBJ.RES_SUCCESS) {
              this.getList(0)
              console.log('删除成功')
            }
          })
        }
      })
    },
    upNoticeEvent (row) {
      common.confirmFn(`已设置置顶的公告将被取消置顶`, '是否确定将此公告置顶').then(res => {
        if (res) {
          api.upNoticeData(row.id).then(res => {
            const { responseCode } = res
            if (responseCode === CONSTANT_OBJ.RES_SUCCESS) {
              this.getList(0)
              console.log('删除成功')
            }
          })
        }
      })
    },
    cancelNoticeEvent (row) {
      common.confirmFn(`是否确定取消此公告置顶`, '').then(res => {
        if (res) {
          api.cancelNotice(row.id).then(res => {
            const { responseCode } = res
            if (responseCode === CONSTANT_OBJ.RES_SUCCESS) {
              this.getList(0)
              console.log('删除成功')
            }
          })
        }
      })
    },
    deletNoticeEvent (row) {
      common.confirmFn(``, '是否确定删除此公告提示').then(res => {
        if (res) {
          api.deleteNotice(row.id).then(res => {
            const { responseCode } = res
            if (responseCode === CONSTANT_OBJ.RES_SUCCESS) {
              this.getList(0)
              console.log('删除成功')
            }
          })
        }
      })
    },
    showUpload () {
      this.uploadDialog = true
    },
    closeUpload (res) {
      this.uploadDialog = res
    },
    getUserData (data) {
      let res = data.map(ele => {
        ele.listValue = ele.userName
        return ele
      })
      this.userIds = data.map(ele => {
        return JSON.stringify({userName: ele.userName, realName: ele.realName, userId: ele.userId})
      })
      console.log(res, '选中的人')
      this.userValueList = [...res]
      this.editUser = false
    },
    getTagData (data) {
      let res = data.map(ele => {
        ele.listValue = ele.labelId
        return ele
      })
      this.labelIds = data.map(ele => {
        return JSON.stringify({labelId: ele.labelId, labelName: ele.labelName})
      })
      this.userValueList = [...res]
      this.editTag = false
    },
    closeUserChoose (val) {
      this.editUser = val
    },
    closeTypeChoose () {
      this.typeDialog = false
    },
    closeEditPop () {
      this.editDialog = false
    },
    closeTagChoose () {
      this.editTag = false
    },
    getEditType (val) {
      switch (val) {
        case 'user':
          this.editUser = true
          break
        case 'tag':
          this.editTag = true
          break
        case 'org':
          this.editOrg = true
          break
      }
    },
    uppdataSuccess (data) {
      data.currentStatus = 'VALID'
      if (this.isOrg) {
        data.listValue = [...this.orgIds]
      }
      if (this.isUser) {
        data.listValue = [...this.userIds]
      }
      if (this.isTag) {
        data.listValue = [...this.labelIds]
      }
      if (this.isEdit) {
        this.editSubmitNotice(data)
      } else {
        this.addNoticeEvent(data)
      }
    },
    addNoticeEvent (data) {
      console.log(data, '提交参数')
      api.addNotice(data).then(res => {
        this.successFn(res, 'editDialog')
        this.isTag = false
        this.isUser = false
        this.isOrg = false
        this.editDialog = false
        this.userValueList = []
      })
    },
    editSubmitNotice (data) {
      api.editNotice(data).then(res => {
        this.successFn(res, 'editDialog')
        this.isTag = false
        this.isUser = false
        this.isOrg = false
        this.editDialog = false
        this.userValueList = []
      })
    },
    successFn (res, dialog) {
      const { responseCode, responseMsg: message } = res
      if (responseCode === CONSTANT_OBJ.RES_SUCCESS) {
        this.$message({
          message,
          type: 'success'
        })
        if (dialog) {
          this[dialog] = false
        }
        this.getList(1)
      }
    },
    getSelectValue (type) {
      this.userValueList = []
      switch (type) {
        case 'SELECT_LABEL':
          this.isTag = true
          this.isUser = false
          this.isOrg = false
          break
        case 'SELECT_USER':
          this.isTag = false
          this.isUser = true
          this.isOrg = false
          break
        case 'SELECT_ORG':
          this.isTag = false
          this.isUser = false
          this.isOrg = true
          break
      }
    },
    addTypeEvent () {
      this.addDialog = true
    },
    updateType (data) {

    },
    getOrgData (ids) {
      this.orgIds = [...ids]
    },
    getOrgTempList (nodes) {
      this.userValueList = [...nodes]
      this.editOrg = false
    },
    closeOrgChoose () {
      this.editOrg = false
    }
  },
  computed: {
    ...mapState({
      dicts: state => state.common.dicts
    })
  }
}
</script>
<style lang="less" scope>
.el-table .table-bg {
  background: #f0f9eb;
}
</style>
